﻿<div class="page-quote">
    <blockquote class="layui-elem-quote">管理部门信息列表<br />这里可以写些注意事项</blockquote>
</div>

<div class="page-query">
    <form class="layui-form" id="formQuery">
        <div class="layui-inline">
            <label class="layui-form-label">部门ID</label>
            <div class="layui-input-block">
                <input type="text" name="DeptId" placeholder="" class="layui-input" autocomplete="off">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">部门名称</label>
            <div class="layui-input-block">
                <input type="text" name="DeptName" placeholder="" class="layui-input" autocomplete="off">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">部门编号</label>
            <div class="layui-input-block">
                <input type="text" name="DeptCode" placeholder="" class="layui-input" autocomplete="off">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">父级部门</label>
            <div class="layui-input-block">
                <select lay-verify="required" lay-search="" name="ParentId">
                    <option value="">全部</option>
                    @if (ViewBag.DeptList != null)
                    {
                        foreach (var li in ViewBag.DeptList)
                        {
                            <option value="@li.Id">@li.Name</option>
                        }
                    }
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" onclick="DeptList.query()">查询</button>
            </div>
        </div>
    </form>
</div>

<div class="page-tool">
    <div class="layui-btn-group">
        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" onclick="DeptList.add()">
            <i class="layui-icon">&#xe608;</i> 添加
        </button>
    </div>
</div>
<div class="page-list">
    <table id="table-list" lay-filter="tableList"></table>
</div>

<script type="text/html" id="barTool">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
    var DeptList = function () {
        let inited = false;
        let data = {};
        var table;

        function initData() {
            layui.use(['form', 'layer', 'table', 'tree', 'element'], function () {

                //加载数据
                loadData();

                //给工具条注册点击事件
                layui.table.on('tool(tableList)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                    var id = obj.data.id;

                    if (obj.event === 'del') {
                        layer.confirm('确认删除该数据？', function (index) {
                            //开启loading
                            layer = layui.layer;
                            var indexLoad = layer.load(3, { shade: 0.3, zIndex: 19891017 });

                            $.ajax({
                                url: "/Dept/DeleteDept",
                                type: "post",
                                data: { id: id },
                                success: function (data) {
                                    layer.close(index);
                                    if (data.state == 1) {
                                        parent.layer.msg("删除成功", { shade: 0.1, icon: 1 });
                                    } else if (data.state == 0) {
                                        parent.layer.open({
                                            title: '提示'
                                            , content: "删除失败 " + data.msg
                                            , shade: 0.4
                                            , icon: 5
                                        });
                                    } else {
                                        parent.layer.open({
                                            title: '提示'
                                            , content: "删除异常 " + data.msg
                                            , shade: 0.4
                                            , icon: 2
                                        });
                                    }
                                    layui.table.reload('table-list');
                                    layer.close(indexLoad);
                                },
                                error: function (xhr, state, errorThrown) {
                                    layer.close(index);
                                    layui.table.reload('table-list');
                                    parent.layer.open({
                                        title: '提示'
                                        , content: "删除异常 " + errorThrown
                                        , shade: 0.4
                                        , icon: 2
                                    });
                                    layer.close(indexLoad);
                                }
                            });

                        });
                    } else if (obj.event === 'edit') {
                        layer.open({
                            type: 2,
                            title: '编辑用户',
                            area: ['400px', '410px'],
                            content: ["/Dept/AddOrUpdateDept?id=" + id]
                        });
                    }
                });

            });

        }

        function loadData() {
            var data = $('#formQuery').serializeJson();

            layui.table.render({
                elem: '#table-list'
                , height: 670
                , url: '/Dept/GetDeptList' //数据接口
                , where: data
                , page: true //开启分页
                , limit: 15
                , cols: [[ //表头
                    { field: 'id', title: 'ID', width: 100, sort: true }
                    , { field: 'deptName', title: '部门名称', width: 160 }
                    , { field: 'deptCode', title: '部门编码', width: 160 }
                    , { field: 'parentId', title: '父级ID', width: 160 }
                    , { field: 'parentName', title: '父级部门', width: 160 }
                    , { field: 'deptLevel', title: '部门级别', width: 160 }
                    , {
                        field: 'createTime', title: '创建时间', templet: function (d) {
                            return layui.util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss");
                        }
                    }
                    , { field: '', title: '操作', width: 150, align: 'center', toolbar: '#barTool' }
                ]]
                , done: function (res, curr, count) {//请求数据完成时，关闭加载loading
                    console.log(res);
                }

            });


        }

        return {
            init() {//初始化
                if (!inited) {
                    initData();
                    inited = true;
                }
            },
            query() {//查询
                loadData();
            },
            add() {//添加
                layer.open({
                    type: 2,
                    title: '添加部门',
                    area: ['400px', '410px'],
                    content: ["/Dept/AddOrUpdateDept"]
                });
            }
        };
    }();
</script>
